<script setup name="DocProcess">
import {useRoute} from "vue-router";
import DocumentList from "@/views/document/process/documentList.vue";
import {tabFunctions} from "@/utils/tab.js";
import {docProcessListStatus} from "@/utils/document.js";

const {proxy} = getCurrentInstance()
const route = useRoute()
const {docStatus} = proxy.useDict(["docStatus", true])
const activeTabName = ref('待办')
const documentListRefs = ref([])
const {
  handChangeTab,
  handClickTab,
  loopSetRef
} = tabFunctions(activeTabName, documentListRefs)

onActivated(() => {
  const docStatus = route.query.docStatus
  if (docStatus != null) {
    handChangeTab(docStatus)
  }
})

</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--公文数据-->
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" class="demo-tabs" @tab-change="handChangeTab" @tab-click="handClickTab">
          <el-tab-pane v-for="(status, index) in docProcessListStatus"
                       :key="status.value"
                       :name="status.value"
                       :label="status.label"
                       lazy
                       style="padding-bottom: 10px;">
            <DocumentList :ref="loopSetRef(index)" :status="status.value" :docStatus="docStatus" :listStatus="docProcessListStatus"
                          v-if="activeTabName === status.value"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.input-style {
  cursor: not-allowed;
}
</style>
